<template>
	<view>
		<!-- 轮播图 -->
		<view class="swiper-view">
			<swiper class="swiper" indicator-dots="true" autoplay="true" circular="true" indicator-active-color="#ffffff">
				<swiper-item v-for="swiper in swiperList" :key="swiper.id">
					<image mode="aspectFill" :src="swiper.imgUrl"></image>
				</swiper-item>
			</swiper>
			<view class="keep-out"></view>
		</view>
		<view class="u-flex box">
			<view class="item" v-for="(t,index) in types" :key="t.id" :class="{active:index==tab}" @tap="changeTab(index)">
				<image style="border-radius: 50%;" :src="t.icon" mode="widthFix"></image>
				<view class="title">{{t.name}}</view>
			</view>
			<view v-if="times > 0 && levels" class="item" @tap="oneClick()">
				<image src="../../static/images/oneclick.png" mode="widthFix"></image>
				<view class="title">一键托管</view>
			</view>
		</view>
		<view class="mark">今日剩余领取次数：{{times}}</view>
		<view class="task-list" v-for="(t,index) in taskList" v-show="tab==index" :key="t.id">
			<view class="u-flex task-item" v-for="task in t.list" :key="task.id">
				<view class="task-cover">
					<image :src="types[index].icon" mode="widthFix"></image>
				</view>
				<view class="task-content">
					<view class="task-content-title">{{task.need}}</view>
					<view class="">剩余：{{task.number}}</view>
					<view class="u-flex u-row-between">
						<text class="bonus">{{task.bonus}}元</text>
						<text class="task-btn lq" v-if="task.lq">已领取</text>
						<text class="task-btn" @tap="lq(task)" v-else>领取</text>
					</view>
				</view>
			</view>

			<view style="margin-top: 30rpx;">
				<u-loadmore :status="t.loadingType" bgColor="#f2f2f2"></u-loadmore>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				levels: 0,
				swiperList: [],
				imgs: ["../../static/images/icon/douyin.png", "../../static/images/icon/weibo.png"],
				types: [],
				limit: 10,
				times: "",
				tab: 0, //0抖音1微博
				taskList: [{
						isLoad: false,
						page: 1,
						loadingType: 'loadmore',
						list: []
					},
					{
						isLoad: false,
						page: 1,
						loadingType: 'loadmore',
						list: []
					}
				]
			};
		},
		onLoad(option) {
			// if(option.type){
			// 	console.log(option.type)
			// 	this.tab = option.type;
			// }
			// this.loadData();
		},
		onShow(option) {
			this.taskList = [{
					isLoad: false,
					page: 1,
					loadingType: 'loadmore',
					list: []
				},
				{
					isLoad: false,
					page: 1,
					loadingType: 'loadmore',
					list: []
				}
			];
			//用户信息
			this.$request.post("/member/getData", {
					dataType: 'json',
					responseType: 'text'
				})
				.then(res => {
					var list = res.data.json.userLevels;
					var isDouyin = (res.data.json.user && res.data.json.user.douyin) ? true : false;
					if(res.data.json.levels)
					if(isDouyin){
						for(let item of res.data.json.levels){
							if(item.isVip){
								this.levels = true;
								return;
							}
						}
					}



				})
			this.loadData();
		},
		onReachBottom() {
			this.loadMore();
		},
		methods: {
			loadData() {
				this.$request.post("/task/getType", {
						dataType: 'json',
						responseType: 'text'
					})
					.then(res => {
						this.types = res.data.json.type;
						this.swiperList = res.data.json.lbt;
						this.times = res.data.json.times;
						this.loadMore();
					}).catch(error => {});

			},
			async loadMore(source) {
				let index = this.tab;
				let item = this.taskList[index];
				let type = item.typeId;

				if (source === 'tabChange' && item.isLoad === true) {
					//tab切换只有第一次需要加载数据
					return;
				}
				if (item.loadingType === 'loading' || item.loadingType === 'nomore') {
					//防止重复加载
					return;
				}
				item.loadingType = 'loading';
				await this.$request.post("/task/getTask", {
						data: {
							type: this.types[index].id,
							page: item.page,
							limit: this.limit
						},
						header: {
							"content-type": "application/x-www-form-urlencoded"
						},
						dataType: 'json',
						responseType: 'text'
					})
					.then(res => {
						if (res.data.json && res.data.json.length > 0) {
							item.list = item.list.concat(res.data.json);
							item.page++;
							item.loadingType = res.data.json.length >= this.limit ? 'loadmore' : "nomore";
						} else {
							item.isLoad = true;
							item.loadingType = 'nomore';
						}
					})
			},
			changeTab(tab) {
				if (this.tab == tab) {
					return;
				}
				this.tab = tab;
				this.loadMore("tabChange");
			},
			lq(target) {
				this.$request.post("/task/lq", {
						data: {
							id: target.id
						},
						dataType: 'json',
						responseType: 'text'
					})
					.then(res => {
						this.$api.msg("领取成功");
						target.number--;
						target.lq = true;
					})
					.catch(error => {});
			},
			/**
			 * 一键完成
			 */
			oneClick(){
				this.$request.post("/task/oneClick", {
						dataType: 'json',
						responseType: 'text'
					})
					.then(res => {
						this.$api.msg("操作成功！");
						this.times = 0;

					})
					.catch(error => {});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: rgb(242, 242, 242);
	}

	.swiper-view {
		.swiper {
			width: 100%;
			height: 480rpx;

			image {
				width: 100%;
				height: 480rpx;
			}
		}

		.keep-out {
			width: 100%;
			height: 30upx;
			border-radius: 100% 100% 0 0;
			// background-color: #ff570a;
			// background-color: #f8f8f8;
			margin-top: -15upx;
			position: absolute;
		}
	}

	.box {
		background-color: #FFFFFF;
		text-align: center;
		padding-top: 60rpx;
		padding-bottom: 30rpx;
	}

	.item {
		flex: 1;
	}

	.item image {
		width: 70rpx;
		height: 70rpx;
	}

	.title {
		font-size: 30rpx;
		margin-top: 20rpx;
		color: #88898d;
	}

	.active .title {
		color: #333333;
	}

	.task-list {
		padding-bottom: 30rpx;
		margin-top: 25rpx;
	}

	.task-item {
		border-radius: 10rpx;
		padding:20rpx;
		margin: 0 15rpx 15rpx;
		background-color: #FFFFFF;

		image {
			width: 90rpx;
			height: 90rpx;
		}

		.task-content {
			margin-left: 30rpx;
			font-size: 28rpx;
			line-height: 50rpx;
			flex: 1;
			.task-content-title{
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.bonus {
			color: red;
			font-size: 40rpx;
		}

		.task-btn {
			min-width: 75px;
			padding: 8rpx 5rpx;
			text-align: center;
			letter-spacing: 4rpx;
			font-size: 15px;
			color: #FFFFFF;
			border-radius: 50rpx;
		    background-color: #edcd83; /* 浏览器不支持的时候显示 */
		    background-image: linear-gradient(90deg, #edcd83, #dcb062);
		}
		uni-image{
			border-radius: 50%;
		}
	}
	.task-btn.lq {
		background-color: #6f6f6f; /* 浏览器不支持的时候显示 */
		background-image: linear-gradient(90deg, #b9b9b9, #6f6f6f);
	}

	.mark {
		padding-left: 30rpx;
		padding-top: 30rpx;
		font-weight: bold;
		font-size: 16px;
	}
</style>
